<!-- 创建时间: 2019年10月27日 星期天 23:55 -->
<template>
    <div class="PhoneLogin_container">
        <div class="mui-input-group">
            <div class="mui-input-row">
                <label>手机号</label>
                <input
                    type="tel"
                    v-model="phoneNumber"
                    class="mui-input-clear"
                    placeholder="请输入手机号"
                    ref="phoneNumber"
                    autofocus="autofocus"
                />
            </div>
            <div class="mui-input-group regCode">
                <label style="display:none">验证码</label>
                <input
                    type="password"
                    :value="captcha"
                    class="mui-input-password"
                    style="display:none"
                />
                <mt-field label="验证码" v-model="captcha">
                    <button
                        type="button"
                        class="mui-btn mui-btn-outlined"
                        @click="getSMS"
                        ref="getSMS"
                    >获取验证码</button>
                </mt-field>
            </div>
        </div>
        <div class="mui-input-group buttonRegion">
            <div class="mui-button-row">
                <button
                    type="button"
                    class="mui-btn mui-btn-primary mui-btn-block"
                    @click="login"
                    ref="login"
                >登录</button>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import mui from "../../lib/MUI/dist/js/mui.js";
import { Field, Toast } from "mint-ui";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            // 手机号
            phoneNumber: "",
            // 获取短信控制定时器
            getSMS_Dt: "",
            // 验证码
            captcha: ""
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 会员获取短信验证码
        getSMS() {
            if (this.phoneNumber == null) {
                mui.alert("请输入手机号");
                this.$refs.phoneNumber.focus();
                return;
            }
            this.$refs.getSMS.setAttribute("disabled", "disabled");
            var second = 120;
            this.getSMS_Dt = setInterval(() => {
                second--;
                this.$refs.getSMS.innerText = "获取验证码(" + second + ")";
                if (second <= 0) {
                    clearInterval(this.getSMS_Dt);
                    this.$refs.getSMS.innerText = "获取验证码";
                    this.$refs.getSMS.removeAttribute("disabled");
                }
            }, 1000);

            this.$http
                .post("getSMS", {
                    phoneNumber: this.phoneNumber
                })
                .then(response => {
                    mui.alert(response.bodyText);
                });
        },
        login() {
            var check = true;
            mui(".PhoneLogin_container input").each(function() {
                //若当前input为空，则alert提醒
                if (!this.value || this.value.trim() == "") {
                    var label = this.previousElementSibling;
                    mui.alert(label.innerText + "不允许为空");
                    check = false;
                    return false;
                }
            }); //校验通过，继续执行业务逻辑
            if (check) {
                if (this.$refs.getSMS.getAttribute("disabled") == null) {
                    mui.alert("请获取验证码");
                } else {
                    this.$refs.login.setAttribute("disabled", "disabled");
                    this.$refs.login.innerText = "登录中...";
                    this.$http
                        .post("phoneLogin", {
                            phoneNumber: this.phoneNumber,
                            captcha: this.captcha
                        })
                        .then(response => {
                            sessionStorage.setItem("cubelibrarytoken",response.bodyText);
                            this.$router.push({
                                path: this.$route.query.redirect
                                    ? this.$route.query.redirect
                                    : "/"
                            });
                        });
                }
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.PhoneLogin_container {
    .regCode {
        margin-top: 12px;
        button {
            font-size: 15px;
        }
    }
    .buttonRegion:before,
    .buttonRegion:after,
    .buttonRegion {
        margin-top: 10px;
        background-color: #fff;
    }
}
.mui-btn-block {
    padding: 5px 0px;
}

.mint-cell-wrapper {
    background-origin: inherit !important;
}
.mui-input-group .mui-input-row:after {
    left: 0;
}
a:hover,
a:focus {
    color: #333333;
    font-weight: bold;
    text-decoration: none;
}
</style>